<template>
  <page-container :title="isPlatform ? '钱包详情' : false">
    <a-spin :spinning="loadingStore" v-if="!isPlatform" slot="content">
      <div class="store-wrap">
        <provider-info-item :providerInfo="providerInfo" v-if="isProvider" />
        <store-info-item :storeInfo="storeInfo" v-else-if="isStore" />
        <a-button type="primary" class="earning-btn" @click="$refs.takeMoneyModal.show()">提现</a-button>
      </div>
    </a-spin>
    <stat-info :wallet="wallet" />
    <a-card :bordered="false" style="margin-top:24px" v-if="isProvider || isStore">
      <div class="ant-descriptions-title">收益统计</div>
      <a-form layout="inline">
        <a-form-item>
          <a-form-item>
            <a-range-picker v-model="dateRange">
              <a-icon slot="suffixIcon" type="calendar" />
            </a-range-picker>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" icon="search" @click="getWalletStatInfo">查询</a-button>
          </a-form-item>
        </a-form-item>
      </a-form>
      <a-table
        ref="table"
        size="default"
        rowKey="sum_price"
        :columns="infoColumns"
        :dataSource="statInfoList"
        :pagination="false"
      >
      </a-table>
    </a-card>
    <a-card :bordered="false" style="margin-top:24px">
      <div class="ant-descriptions-title">收益列表</div>
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="4" :sm="24">
              <a-form-item label="收入类型">
                <a-select v-model="queryParam.status" placeholder="选择类型" allowClear>
                  <a-select-option :value="1">收入列表</a-select-option>
                  <a-select-option :value="2">提现列表</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <a-input placeholder="请输入订单号" v-model="queryParam.out_trade_no"></a-input>
            </a-col>
            <template v-if="queryParam.status === 1">
              <a-col :md="4" :sm="24">
                <a-select v-model="queryParam.from_type" placeholder="选择模块来源">
                  <a-select-option v-for="(item, key) in formTypeList" :value="key" :key="key">{{
                    item
                  }}</a-select-option>
                </a-select>
              </a-col>
              <template v-if="isStore">
                <a-col :md="4" :sm="24">
                  <a-select v-model="queryParam.detail_type" placeholder="选择详细收入">
                    <a-select-option v-for="(item, key) in detailTypeList" :value="key" :key="key">{{
                      item
                    }}</a-select-option>
                  </a-select>
                </a-col>
              </template>
            </template>
            <a-col :md="4" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="handleSearch(true)" icon="search">查询</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <s-table
        ref="table"
        size="default"
        rowKey="id"
        :columns="columns"
        :data="loadData"
        showPagination="auto"
        :pagination="pagination"
      >
        <template slot="status" slot-scope="text">{{ text | walletStatusFilter }}</template>
        <template slot="pay_type" slot-scope="text">{{ text | payTypeFilter }}</template>
        <template slot="from_type" slot-scope="text">{{ text | fromTypeFilter }}</template>
        <span slot="actions" slot-scope="text, record">
          <template>
            <a @click="handleDetail(record.id)">详情</a>
          </template>
        </span>
      </s-table>
    </a-card>
<!--    <div style="margin-top:24px" v-if="isStore">-->
<!--      <steward-wallet-table />-->
<!--    </div>-->
    <take-money-modal ref="takeMoneyModal" @ok="handleSearch" :takeMoneyAction="takeMoneyAction"/>
  </page-container>
</template>
<script>
import {
  storeWalletDetail,
  providerWalletDetail,
  platformWalletDetail,
  storeWalletStatInfo,
  storeTakeMoney,
  providerTakeMoney,
  providerWalletStatInfo
} from '@/api/stat'
import { managerInfo } from '@/api/managerProvider'
import STable from '@/components/Table'
import payStatusMixin from '@/mixins/payStatus'
import storeTypeMixin from '@/mixins/storeType'
import StatInfo from '@/components/stat-info/stat-info'
import { storeInfo } from '@/api/store'
import StoreInfoItem from '@/components/StoreInfoItem'
import ProviderInfoItem from '@/components/ProviderInfoItem'
import takeMoneyModal from './modules/TakeMoneyModal'
import StewardWalletTable from './modules/StewardWalletTable'
import formTableMixin from '@/mixins/formTableMixin'
import moment from 'moment'

const columns = [
  {
    title: '订单号',
    dataIndex: 'out_trade_no'
  },
  {
    title: '价格',
    dataIndex: 'price',
    customRender (text) {
      return '￥' + text
    }
  },
  {
    title: '来源',
    dataIndex: 'from_type',
    scopedSlots: { customRender: 'from_type' }
  },
  {
    title: '说明',
    dataIndex: 'remark'
  },
  {
    title: '支付方式',
    dataIndex: 'pay_type',
    scopedSlots: { customRender: 'pay_type' }
  },
  {
    title: '状态',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' }
  }
  // {
  //   title: '操作',
  //   dataIndex: 'actions',
  //   width: '150px',
  //   scopedSlots: { customRender: 'actions' }
  // }
]

const WALLET_TYPE_MAP = {
  1: '收入',
  2: '提现'
}

const FORM_TYPE_MAP = {
  clothes: '洗衣',
  appliance: '家电',
  house: '家政',
  goods: '商城',
  vip: '会员'
}

const DETAIL_TYPE_MAP = {
  clothes_steward_store: '门店下乐管家洗衣抽成',
  appliance_steward_store: '门店下乐管家家电抽成',
  house_steward_store: '门店下乐管家家政抽成',
  goods_steward_store: '门店下乐管家商城抽成',
  vip_steward_store: '门店下乐管家vip抽成',
  clothes_steward: '门店作为乐管家洗衣抽成',
  appliance_steward: '门店作为乐管家家电抽成',
  house_steward: '门店作为乐管家家政抽成',
  goods_steward: '门店作为乐管家商城抽成',
  vip_steward: '门店作为乐管家vip抽成'
}

export default {
  name: 'StoreWalletDetail',
  components: {
    STable,
    StatInfo,
    StoreInfoItem,
    ProviderInfoItem,
    takeMoneyModal,
    StewardWalletTable
  },
  mixins: [payStatusMixin, storeTypeMixin, formTableMixin],
  data () {
    this.columns = columns
    this.formTypeList = FORM_TYPE_MAP
    this.detailTypeList = DETAIL_TYPE_MAP
    return {
      queryParam: {},
      wallet: {},
      storeInfo: {},
      providerInfo: {},
      loadingStore: false,
      dateRange: [],
      statInfoList: [],
      infoColumns: [
        {
          title: '备注',
          dataIndex: 'remark'
        },
        {
          title: '收益',
          dataIndex: 'sum_price',
          width: '50%',
          customRender (text) {
            return '￥' + text.toFixed(2)
          }
        }
      ]
    }
  },
  filters: {
    walletStatusFilter (status) {
      return WALLET_TYPE_MAP[status]
    },
    fromTypeFilter (type) {
      return FORM_TYPE_MAP[type]
    }
  },
  computed: {
    isProvider () {
      return this.$route.query.walletType === 'provider'
    },
    isPlatform () {
      return this.$route.query.walletType === 'platform'
    },
    isStore () {
      return this.$route.query.walletType === 'store'
    },
    listAction () {
      if (this.isProvider) {
        return this.getProviderData
      } else if (this.isPlatform) {
        return this.getPlatformData
      } else {
        return this.getStoreData
      }
    },
    takeMoneyAction () {
      return this.isProvider ? providerTakeMoney : storeTakeMoney
    }
  },
  async created () {
    this.loadingStore = true
    const PList = []
    if (this.isProvider) {
      PList.push(this.getProviderInfo(), this.getProviderWalletStatInfo())
    } else if (this.isPlatform) {
      this.formTypeList = { ...FORM_TYPE_MAP, group_buy: '团购' }
    } else {
      PList.push(this.getStoreInfo(), this.getStoreWalletStatInfo())
    }
    await Promise.all(PList)
    this.loadingStore = false
  },
  methods: {
    getWalletStatInfo () {
      if (this.isProvider) {
        this.getProviderWalletStatInfo()
      } else {
        this.getStoreWalletStatInfo()
      }
    },
    getStoreWalletStatInfo () {
      const params = {
        store_id: this.$route.query.id,
        store_type: this.$route.query.type
      }
      const [atime, etime] = this.dateRange
      const dateParams = { atime: atime && atime.format(atime._f), etime: etime && etime.format(etime._f) }
      const requestParams = Object.assign({}, dateParams, params)
      return storeWalletStatInfo(requestParams).then(res => {
        const { atime, etime } = res.data
        this.dateRange = [moment(atime, 'YYYY-MM-DD'), moment(etime, 'YYYY-MM-DD')]
        this.statInfoList = res.data.list
      })
    },
    getProviderWalletStatInfo () {
      const params = {
        uid: this.$route.query.uid
      }
      const [atime, etime] = this.dateRange
      const dateParams = { atime: atime && atime.format(atime._f), etime: etime && etime.format(etime._f) }
      const requestParams = Object.assign({}, dateParams, params)
      return providerWalletStatInfo(requestParams).then(res => {
        const { atime, etime } = res.data
        this.dateRange = [moment(atime, 'YYYY-MM-DD'), moment(etime, 'YYYY-MM-DD')]
        this.statInfoList = res.data.list
      })
    },
    getStoreInfo () {
      const params = this.$route.query
      return storeInfo(params).then(res => {
        this.storeInfo = res.data
      })
    },
    getProviderInfo () {
      const params = Number(this.$route.query.uid)
      return managerInfo({ uid: params }).then(res => {
        this.providerInfo = res.data
      })
    },
    getStoreData (parameter) {
      const params = {
        store_id: this.$route.query.id,
        store_type: this.$route.query.type
      }
      return storeWalletDetail(Object.assign(parameter, params, this.queryParam)).then(res => {
        this.wallet = res.data.wallet || {}
        return res
      })
    },
    getProviderData (parameter) {
      const params = {
        uid: this.$route.query.uid,
        ...this.queryParam
      }
      return providerWalletDetail(Object.assign(parameter, params)).then(res => {
        this.wallet = res.data.stat || {}
        return res
      })
    },
    getPlatformData (parameter) {
      return platformWalletDetail(Object.assign(parameter, this.queryParam, this.$route.query)).then(res => {
        this.wallet = res.data.wallet || {}
        return res
      })
    }
  }
}
</script>

<style lang="less" scoped>
.store-wrap {
  display: flex;
  align-items: flex-end;
  .store-container {
    flex: 1;
  }
  .earning-btn {
    padding: 0 25px;
  }
}
</style>
